<template>
  <div class="viewContain">
    <el-form ref="formData" :model="formData" size="small" label-width="150px" :rules="rules">
      <el-row>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
          <el-form-item label="设备类型 :" prop="partkind">
            <el-select v-model="formData.partkind" clearable placeholder="设备类型">
              <el-option
                v-for="item in partkinds"
                :key="item.code"
                :label="item.codeDesc"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
          <el-form-item label="设备id :" prop="equipmentNo">
            <el-input v-model="formData.equipmentNo" disabled size="small" clearable placeholder="设备id" style="max-width:200px" />
          </el-form-item>
        </el-col>

        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
          <el-form-item label="所属机构 :" prop="orgId">
            <el-cascader
              v-model="formData.orgId"
              :options="orgs"
              clearable
              :props="casProps"
              @change="handleChange"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
          <el-form-item label="所属区域 :">
            <el-input v-model="formData.areaInfo" clearable style="max-width:200px" disabled />
          </el-form-item>
        </el-col>
        <input v-model="formData.areaCode" type="hidden" name="areaCode">

        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
          <el-form-item label="设备名称 :" prop="deviceName">
            <el-input v-model="formData.deviceName" size="small" clearable placeholder="设备名称" style="max-width:200px" />
          </el-form-item>
        </el-col>

        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
          <el-form-item label="联系人 :" prop="owner">
            <el-input v-model="formData.owner" size="small" clearable placeholder="持有人" style="max-width:200px" />
          </el-form-item>
        </el-col>

        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
          <el-form-item label="手机号码 :" prop="ownerLink">
            <el-input v-model="formData.ownerLink" size="small" clearable placeholder="持有人联系方式" style="max-width:200px" />
          </el-form-item>
        </el-col>

        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
          <el-form-item label="设备ip :" prop="deviceIp">
            <el-input v-model="formData.deviceIp" size="small" clearable placeholder="设备ip" style="max-width:200px" />
          </el-form-item>
        </el-col>

        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
          <el-form-item label="设备Mac :" prop="deviceMac">
            <el-input v-model="formData.deviceMac" size="small" clearable placeholder="设备Mac" style="max-width:200px" />
          </el-form-item>
        </el-col>

        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
          <el-form-item label="设备状态 :" prop="state">
            <el-radio-group v-model="formData.state">
              <el-radio :label="'Y'">可用</el-radio>
              <el-radio :label="'W'">维护</el-radio>
              <el-radio :label="'T'">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
          <el-form-item label="金融功能 :" prop="isFinance">
            <el-radio-group v-model="formData.isFinance">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
          <el-form-item label="商户号 :" prop="tenantNo">
            <el-input v-model="formData.tenantNo" :disabled="financeFlag" size="small" clearable placeholder="商户号" style="max-width:200px" />
          </el-form-item>
        </el-col>

        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
          <el-form-item label="终端号 :" prop="terminalNo">
            <el-input v-model="formData.terminalNo" :disabled="financeFlag" size="small" clearable placeholder="终端号" style="max-width:200px" />
          </el-form-item>
        </el-col>

        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
          <el-form-item label="imei号 :" prop="imei">
            <el-input v-model="formData.imei" size="small" clearable placeholder="imei" style="max-width:200px" />
          </el-form-item>
        </el-col>

        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 10,offset:6 }" :xl="{ span: 12 }">
          <el-form-item>
            <el-button size="mini" type="primary" @click="handleUpdateDevice">修改</el-button>
            <el-button size="mini" type="primary" @click="handleBack">返回</el-button>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
  </div>
</template>

<script>
import { validPhone } from '@u/validate'
// eslint-disable-next-line no-unused-vars
import { updateDeviceInfo } from '@a/device/basic.js'
import { getDeviceKinds, getOrgList, getAreaInfo, getOrgById } from '@a/device/basic.js'

export default {
  data() {
    const validatePhone = (rules, value, callback) => {
      if (!validPhone(value)) {
        callback(new Error('手机号格式输入有误!'))
      } else {
        callback()
      }
    }

    return {
      formData: {
        financeFlag: false,
        areaCode: '',
        deviceName: '',
        equipmentNo: '',
        id: '',
        orgId: '',
        partkind: '',
        owner: '',
        ownerLink: '',
        deviceIp: '',
        deviceMac: '',
        state: '',
        updateTime: '',
        imei: ''
      },
      orgs: [],
      partkinds: [],
      casProps: {
        checkStrictly: true, // 是否严格的遵守父子节点不互相关联
        emitPath: false, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
        value: 'orgId', // 指定选项的值为选项对象的某个属性值
        label: 'name' // 指定选项标签为选项对象的某个属性值
      },
      rules: {
        deviceName: [
          { required: true, message: '设备名不能为空', trigger: 'blur' }
        ],
        equipmentNo: [
          { required: true, message: '设备编号不能为空', trigger: 'blur' }
        ],
        orgId: [
          { required: true, message: '网点id不能为空', trigger: 'blur' }
        ],
        owner: [
          { required: true, message: '持有人不能为空', trigger: 'blur' }
        ],
        ownerLink: [
          { required: true, message: '持有人联系方式不能为空', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        partkind: [
          { required: true, message: '设备类型不能为空', trigger: 'blur' }
        ],
        state: [
          { required: true, message: '请选择设备状态', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    'formData.isFinance'(val) {
      if (parseInt(val) === 1) {
        this.financeFlag = false
      }
      if (parseInt(val) === 0) {
        this.financeFlag = true
        this.formData.tenantNo = ''
        this.formData.terminalNo = ''
      }
    }
  },
  mounted() {
    const userInfo = JSON.parse(localStorage.getItem('userInfo'))
    getDeviceKinds().then(res => {
      console.log(res)
      if (res.code === 0) {
        this.partkinds = res.data
      } else {
        this.$message({
          type: 'error',
          message: res.msg
        })
      }
    })
    getOrgList(userInfo.areaId).then(res => {
      if (res.code === 0) {
        this.orgs = res.data
        console.log(this.orgs)
      }
    })

    if (this.$route.params.data === undefined) {
      console.log('请求中未携带数据')
      var deviceJson = localStorage.getItem('device')
      if (deviceJson !== undefined && deviceJson !== null) {
        var localDevice = JSON.parse(deviceJson)
        console.log('状态:' + localDevice.state + '种类：' + localDevice.partkind)
        if (localDevice.state === '可用') { localDevice.state = 'Y' }
        if (localDevice.state === '维护') { localDevice.state = 'W' }
        if (localDevice.state === '停用') { localDevice.state = 'T' }
        console.log(localDevice.state)
        this.formData = localDevice
        if (this.formData.isFinance === 0) {
          this.financeFlag = true
        }
      }
    }

    if (this.$route.params.data !== undefined) {
      var device = JSON.stringify(this.$route.params.data)
      localStorage.setItem('device', device)
      this.formData = this.$route.params.data
      if (this.formData.isFinance === 0) {
        this.financeFlag = true
      }
      if (this.$route.params.data.state === '可用') { this.formData.state = 'Y' }
      if (this.$route.params.data.state === '维护') { this.formData.state = 'W' }
      if (this.$route.params.data.state === '停用') { this.formData.state = 'T' }
    }
    this.getDistinct(this.formData.orgId)
  },
  methods: {
    handleBack() {
      this.$store.dispatch('tagsView/delVisitedView', this.$route)
      this.$router.go(-1)
    },

    // 修改设备信息
    handleUpdateDevice() {
      console.log('修改设备信息')
      this.$refs.formData.validate(valide => {
        valide ? this.updateDevice() : ''
      })
    },

    // 修改设备信息
    updateDevice() {
      for (var i = 0; i < this.partkinds.length; i++) {
        if (this.formData.partkind === this.partkinds[i].codeDesc) {
          this.formData.partkind = this.partkinds[i].code
          break
        }
      }

      updateDeviceInfo(this.formData).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.$message({
            type: 'success',
            message: '设备更新成功'
          })
          this.handleBack()
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    },

    // 所属机构级联选择
    handleChange(orgId) {
      this.getDistinct(orgId)
    },
    // 获取所属区域信息
    getDistinct(orgId) {
      if (orgId !== null && orgId !== undefined) {
        getOrgById(orgId).then(res => {
          const distinctId = res.data.distinctId
          this.formData.areaCode = distinctId
          getAreaInfo(distinctId).then(res => {
            if (res.code === 0) {
              const arr = []
              if (res.data !== null) {
                res.data.forEach(item => arr.push(item.name))
                this.formData.areaInfo = arr.join('/')
                this.$forceUpdate()
              }
            }
          })
        })
      }
    }
  }
}

</script>

<style lang="scss" scoped>

</style>
